<!doctype html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
<title>详情</title>
<link href="../showstatic/css/seat.css" type="text/css" rel="stylesheet" />
<link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<link href="../showstatic/js/layer-v3.0.3/layer/mobile/need/layer.css" rel="stylesheet" type="text/css" />
<link href="../showstatic/js/layer-v3.0.3/layer/mobile/need/layer.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="../showstatic/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="../showstatic/js/phone.js" ></script>
<script type="text/javascript" src="../showstatic/js/layer-v3.0.3/layer/mobile/layer.js"></script>
</head>

<body>
<div class="whole">

	<header class="header" id="movieTitle">
        <a href="javascript:history.back(-1)" class="fa fa-angle-left" ></a>

    </header>
    
    <div class="seat_head" id="headText">
    	<!--<h3 id="movieAddress">北京沃美影城常营店</h3>
        <span>
        	<div id="movieTime">今天07-06</div>
        </span>-->
    </div>
    
    <div class="seat_show">
    	<ul>
        	<li>
            	<i></i>
                <span>可选</span>
            </li>
            <li>
            	<i></i>
                <span>已售</span>
            </li>
            <li>
            	<i></i>
                <span>已选</span>
            </li>
            <li>
            	<i></i>
                <span>最佳区域</span>
            </li>
        </ul>
    </div>
    
    <div class="seat_choose">
    	<div class="number" id="num"></div>
    	<div class="seats" id="seats"></div>
        
    </div>
    <div class="buttons" onclick="sub()">确认选择</div>

</div>

<script th:inline="javascript">
  var url = [[@{/}]];
</script>

<script>
    var LocString = String(window.document.location.href);

    function GetQueryString(name) {
        var rs = new RegExp("(^|)" + name + "=([^&]*)(&|$)", "gi").exec(LocString),
            tmp;
        if (tmp = rs) {
            return decodeURI(tmp[2]);
        }
        return "";
    }
    var scheduleId = GetQueryString("id");

    function sub() {
        var arr = [];
        $('.seats li').not('.selected').children('input:checked').each(function() {
            arr.push($(this).val());
        });
        $.ajax({
            url: url+"order/ceateOrder",
            type: "post",
            data: "arr=" + arr+"&scheduleId="+scheduleId,
            success: function(data){
                if(data.code==500){
                    alert(data.msg);
                }else if(data.code==200){
                    //选座成功跳转到预订单页面
                    var orderNum = data.result.ordernum;
                    // alert("订单号："+orderNum);
                    var form = $("<form method='post'></form>");
                    form.attr("action",url+"order/getOrderInfo");
                    var input1 = $("<input type='hidden'>").attr("name", "orderNum").val(orderNum); //退订单号
                    form.append(input1);
                    $("body").append($(form));
                    form.submit();
                }
            }
        });
    }

    $(function(){
        var num = 0;
        var rowNum = 0;
        var seatList = new Array();
        var hallId = 0;
        var movieTime = "";
        var movieId = 0;
        $.ajax({
            url: "/schedule/selectByScheduleId/",
            data:{
              'id': scheduleId
            },
            type: "post",
            async: false,
            success: function(data){
                hallId = data.hallId;
                movieTime = data.begintime;
                movieId = data.moviesId;
            }
        });

        $.ajax({
            url: "/cinemaInfo/select/",
            type: "post",
            async: false,
            success: function(data){
                var strs = data.result.copyright.substring(0,4)+data.result.address+"店";
                var str = "<h3 id='movieAddress'>"+ strs +"</h3>\n" +
                    "<span>\n" +
                    "<div>"+ movieTime +"</div>" +
                    "</span>";
                $("#headText").append(str);
            }
        });

        $.ajax({
            url: "/movie/selectOne",
            type: "post",
            data:{
               'moviesId': movieId
            },
            async: false,
            success: function(data){
                var strs = "<span class='names'>"+data.movename +"</span>";
                $("#movieTitle").append(strs);
            }
        });


        $.ajax({
            url: "../hall/selectById",
            type: "post",
            async: false,
            data:{
                'id':hallId
            },
            success: function(data){
                num = data.seatsnum;
            }
        });

        $.ajax({
            url: "../seats/selectBySid",
            type: "post",
            async: false,
            data:{
                'scheduleId':scheduleId,
                'hallId':hallId
            },
            success: function(data) {
                for (var i = 0;i<data.length;i++){
                   if (data[i].seatrow == 1){
                       seatList[i]=data[i].seatrow;
                   } else {
                       var seatTotal = (data[i].seatrow-1)*17+data[i].seatcolumn;
                       seatList[i]=seatTotal;
                   }
                }
            }
        });
        rowNum = Math.ceil(num/17);
        var html='';
        html+='<ul class="touchs" id="touchs"><div class="screen">大厅屏幕</div>';
        for(var i=1; i<=num; i++){
            var selected = '';
            for(var k=0;k<seatList.length;k++){
                if (i==seatList[k]){
                    selected = 'selected';
                }
            }
            html+='<li class="'+selected+'">';
            html+='<input type="checkbox" name="seat-'+i+'" id="seat-'+i+'" value="'+ i +'"/>';
            html+='<label for="seat-'+i+'"></label>';
            html+='</li>';

        }
        var topPx = Math.ceil(rowNum/4)*75;
        html+='<div class="the_best" style="width: 350px;height: 225px;top: '+ topPx +'px;"></div><div class="crossnum" id="crossnum"></div></ul>';
        $('#seats').html(html);

        $('.selected').children('input').attr({'disabled':'disabled','checked':'checked'});

        $('.seats li input').on('click',function(){
            var checklen = $('.seats li').not('.selected').children('input:checked').length;
            console.log(checklen);
            if(checklen>2){
                popu('最多只能选择两个座位');
                return false;
            }
        });

        //公用弹出层
        function popu(content){
            layer.open({
                content: content
                ,skin: 'msg'
                ,time: 3
            });
        }

        var num='';
            num+='<ul>';
            for(var i=1; i<=rowNum; i++){
                num+='<li>'+i+'</li>';
            }
            html+='</ul>';
            $('#num').html(num);

        var crossnum='';
            crossnum+='<ul>';
            for(var j=1; j<=17; j++){
                crossnum+='<li>'+j+'</li>';
            }
            html+='</ul>';
            $('#crossnum').html(crossnum);

    })
</script>

<!---拖拽js--->
<script>
$(function(){
    var flag = false;
    var cur = {
        x:0,
        y:0
    }
    var nx,ny,dx,dy,x,y ;
    function down(){
        flag = true;
        var touch ;
        if(event.touches){
            touch = event.touches[0];
        }else {
            touch = event;
        }
        cur.x = touch.clientX;
        cur.y = touch.clientY;
        dx = div2.offsetLeft;
        dy = div2.offsetTop;
    }
    function move(){
        if(flag){
            var touch ;
            if(event.touches){
                touch = event.touches[0];
            }else {
                touch = event;
            }
            nx = touch.clientX - cur.x;
            ny = touch.clientY - cur.y;
            x = dx+nx;
            y = dy+ny;
            div2.style.left = x+"px";
            //div2.style.top = y +"px";

			
            //阻止页面的滑动默认事件
            document.addEventListener("touchmove",function(){
                //event.preventDefault();
            },false);
        }
    }
    //鼠标释放时候的函数
    function end(){
        flag = false;
    }
    var div2 = document.getElementById("touchs");
    div2.addEventListener("mousedown",function(){
        down();
    },false);
    div2.addEventListener("touchstart",function(){
        down();
    },false)
    div2.addEventListener("mousemove",function(){
        move();
    },false);
    div2.addEventListener("touchmove",function(){
        move();
    },false)
    document.body.addEventListener("mouseup",function(){
        end();
    },false);
    div2.addEventListener("touchend",function(){
        end();
    },false);
	
});
</script>

</body>
</html>
